<template>
  <div class="bento-item">
    <div class="bento-item__title" v-if="title">{{ title }}</div>
    <div class="bento-item__body">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  title: String,
})
</script>
<style lang="scss" scoped>
.bento-item {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  min-height: 120px;
  max-height: 360px;
  position: relative;
}

.bento-item__title {
  font-size: 24px;
  color: #fff;
  margin-bottom: 14px;
}
</style>
